/**
 * Created with File
 * Author: Chuans
 * Github: https://github.com/chuans
 * Date: 2018/9/7
 * Time: 下午2:49
 */

import * as React from 'react';
import {observer} from 'mobx-react';

import {Button, Form, Spin, message} from 'antd';
import {withWrapper} from '../../components/basic';
import dataFormTab from '../../components/basic/item';
import SelectUser from '../../components/select-user';
import SelectUserStore from '../../components/select-user/store';
import {editForm} from './form';
import NotificationStore from './store';


const FormItem = Form.Item;

@observer
class Edit extends React.Component<any> {

    public formItems: any[];


    public componentWillMount() {
        this.setFormItems();
    }

    /**
     * 设置表单列表
     */
    public setFormItems = () => {
        const {form} = this.props;

        const Comps = dataFormTab(editForm());

        this.formItems = [];

        Object.keys(Comps).forEach((ItemName: any) => {
            const ItemComp = Comps[ItemName];

            this.formItems.push(
                <ItemComp style={{width: 350}}
                          form={form}
                          key={ItemName}
                />
            )
        });

    }

    /**
     * 提交时
     */
    public handleSubmit = async (e: any) => {
        e.preventDefault();
        const {form} = this.props;

        // 先判断当前用户是否已经选择
        if (!NotificationStore.currentSelect) {
            return message.warn('请选择用户群体')
        }

        form.validateFields(async (err: any, values: any) => {

            if (!err) {

                const result = await NotificationStore.addNotification(values);

                if (result) {
                    return message.error(result);
                }

                // 重置 表单的值
                form.resetFields();
                SelectUserStore.setCurrentSelect('');

                message.success('添加成功');
            }
        });
    };

    public onSelectUserChange = (val: number | any) => {
        NotificationStore.setCurrentSelect(typeof val === 'number' ? val : val.id);
    }

    public render() {
        return (
            <Spin spinning={NotificationStore.addLoading}>
                <Form className="user-edit-wraper" onSubmit={this.handleSubmit}>
                    <h2 className="edit-title">添加金币记录</h2>

                    {this.formItems}

                    <FormItem label="选择用户群体" style={{width: 350}}>
                        <SelectUser onValueChange={this.onSelectUserChange}/>
                    </FormItem>

                    <FormItem style={{marginTop: 30}}>
                        <Button className="submit"
                                size="large"
                                type="primary"
                                onClick={() => {
                                    this.props.history.goBack();
                                }}
                                style={{marginRight: 30, width: 100}}
                        >
                            返回
                        </Button>
                        <Button className="submit"
                                htmlType="submit"
                                size="large"
                                type="primary">提交修改</Button>
                    </FormItem>
                </Form>
            </Spin>
        )
    }
}

export default withWrapper(Form.create()(Edit));
